<template>
  <div>
    <el-container>
      <el-aside style="width: 225px">
        <el-row class="tac">
          <el-col :span="24">
            <div class="header1">胖虎到家</div>
            <el-page-header :icon="null">
              <template #content>
                <div class="flex items-center">
                  <el-avatar
                    :size="32"
                    class="mr-3"
                    src="https://img2.baidu.com/it/u=3701072132,2222944395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
                  />
                  <span class="text-large font-600 mr-3"> 蛤蟆 </span>
                </div>
              </template>
            </el-page-header>
            <el-menu
              active-text-color="#42b983"
              background-color="#2d4050"
              class="el-menu-vertical-demo"
              default-active="/main/index"
              text-color="#fff"
              router
            >
              <el-scrollbar height="800px">
                <el-menu-item index="/main/index">
                  <el-icon><location /></el-icon>
                  <span>网站首页</span>
                </el-menu-item>
                
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon><Aim /></el-icon>
                    <span>系统管理</span>
                  </template>
                  <el-menu-item index="/main/UserManagement">用户管理</el-menu-item>
                  <el-menu-item index="/main/RoleManagement">角色管理</el-menu-item>
                  <el-menu-item index="/main/MenuManagement">菜单管理</el-menu-item>
                  <el-menu-item index="/main/CompanyManagement">公司管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                  <template #title>
                    <el-icon><Histogram /></el-icon>
                    <span>课程管理</span>
                  </template>
                  <el-menu-item index="/main/CourseClassification">课程分类管理</el-menu-item>
                  <el-menu-item index="/main/CourseManagement">课程管理</el-menu-item>
                  <el-menu-item index="/main/CourseVideo">课程视频管理</el-menu-item>
                  <el-menu-item index="/main/CourseEvaluation">课程评价管理</el-menu-item>
                  <el-menu-item index="/main/CourseOrder">课程订单管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu  index="3">
                  <template #title>
                    <el-icon><Location /></el-icon>
                    <span>师资管理</span>
                  </template>
                  <el-menu-item  index="/main/Consult">咨询师管理</el-menu-item>
                  <el-menu-item  index="/main/ConsultLevel">咨询等级管理</el-menu-item>
                  <el-menu-item  index="/main/FeeManagement">咨询收费分类管理</el-menu-item>
                  <el-menu-item  index="/main/Charge">咨询收费标准管理</el-menu-item>
                  <el-menu-item  index="/main/Specialty">擅长领域管理</el-menu-item>
                  <el-menu-item  index="/main/MessageManagement">咨询师留言管理</el-menu-item>
                  <el-menu-item  index="/main/EvaluationManagement">咨询师评价管理</el-menu-item>
                  <el-menu-item  index="/main/ConsultingOrder">咨询师订单管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                  <template #title>
                    <el-icon><Discount /></el-icon>
                    <span>内容管理</span>
                  </template>
                  <el-menu-item index="/main/ArticleCategory">文章分类管理</el-menu-item>
                  <el-menu-item index="/main/Article">文章管理</el-menu-item>
                  <el-menu-item index="/main/RecycleBin">回收站</el-menu-item>
                  <el-menu-item index="/main/FmCategory">FM分类管理</el-menu-item>
                  <el-menu-item index="/main/Fm">FM</el-menu-item>
                  <el-menu-item index="/main/PublicWelfareCenter">公益中心管理</el-menu-item>
                  <el-menu-item index="/main/PsychologicalKnowledge">心理知识管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                  <template #title>
                    <el-icon><StarFilled /></el-icon>
                    <span>心理测评管理</span>
                  </template>
                  <el-menu-item index="/main/psychologicalManagement">测评分类管理</el-menu-item>
                  <el-menu-item index="/main/questionManagement">题目管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                  <template #title>
                    <el-icon><Histogram /></el-icon>
                    <span>问题管理</span>
                  </template>
                  <el-menu-item index="/main/ProblemManagement">问题管理</el-menu-item>
                  <el-menu-item index="/main/ReplyManagement">回复管理</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="/main/ConsultationManagement">
                  <el-icon><Document /></el-icon>
                  <span>咨询预约</span>
                </el-menu-item>
                <el-menu-item index="/main/Information">
                  <el-icon><Avatar /></el-icon>
                  <span>资讯公告</span>
                </el-menu-item>
                <el-menu-item index="/main/PointsManagement">
                  <el-icon><StarFilled /></el-icon>
                  <span>积分管理</span>
                </el-menu-item>
              </el-scrollbar>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-right">
            <el-dropdown @command="test" style="outline: none; border: none;">
                <span class="el-dropdown-link">
                    <img src="https://img2.baidu.com/it/u=3701072132,2222944395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" alt=""/>肥肥的蛤蟆
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item command="center">个人中心</el-dropdown-item>
                    <el-dropdown-item command="password">修改密码</el-dropdown-item>
                    <el-dropdown-item command="system">系统设置</el-dropdown-item>
                    <el-dropdown-item command="back">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
    
<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Aim,
  Bicycle,
  Setting,
  HomeFilled,
  Discount,
  Histogram,
  Avatar,
  StarFilled,
  List,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from 'axios';
let router = useRouter();
function test(val) {
  if (val == "back") {
    axios({
      method: "get",
      url: "http://localhost:8081/PangHuDaoJia/admin?method=logout"
    }).then((res) => {
        console.log(res);
      if (res.data.code == 500) {
        ElMessage.error("退出失败");
      } else {
        router.replace("/loginpage");
      }
    });
  }
}
</script>
<style scoped>
.el-container {
  height: 100vh;
}
.el-menu-vertical-demo {
  border: none;
}
.el-aside {
  width: 210px;
  height: 100%;
  background-color: #2d4050;
}
.el-header {
  height: 60px;
  background-color: #3388bf;
}
.text-large {
  color: #ffffff;
  font-size: 14px;
}
.mr-3 {
  margin-right: 10px;
  vertical-align: middle;
}
.el-page-header {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 210px;
}
.head {
  background-color: #346c92;
  height: 60px;
  text-align: center;
  line-height: 60px;
  width: 210px;
  color: aqua;
}
.header-left {
  float: left;
}
.header-left .icon {
  font-size: 26px;
  padding-top: 17px;
  cursor: pointer;
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
  margin-top: 5px;
  border: none;
  outline: none;
}
.el-dropdown-link img {
  border-radius: 50%;
  width: 50px;
  flex-shrink: 0;
}
.header-right {
  float: right;
  line-height: 60px;
}
.header-right img {
  height: 50px;
  vertical-align: middle;
}
.header1 {
  background: #176eb6;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  color: rgb(36, 232, 232);
}
</style>